<template>
  <div class="add-bankcard-bg">
    <div class="add-header">
      <el-button link class="back-btn" @click="$emit('back')">
        <el-icon><ArrowLeft /></el-icon>
      </el-button>
      <span class="add-title">添加银行卡</span>
    </div>
    <div class="add-content">
      <div class="add-form-card">
        <div class="form-label">卡号</div>
        <el-input
          v-model="cardNumberInput"
          :formatter="formatCardNumber"
          :parser="parseCardNumber"
          maxlength="23"
          placeholder="请输入卡号"
          class="card-input"
        >
          <template #suffix>
            <el-icon class="card-camera"><Camera /></el-icon>
          </template>
        </el-input>
        <div class="form-label">卡类型</div>
        <div class="card-type-row" @click="goSelectBank">
          <img v-if="cardLogo" :src="cardLogo" class="card-type-logo" />
          <span class="card-type-text">{{ cardType || '请选择卡类型' }}</span>
          <el-icon class="card-type-arrow"><ArrowRight /></el-icon>
        </div>
        <div class="form-label">银行预留手机号</div>
        <el-input v-model="phone" maxlength="11" placeholder="请输入银行预留手机号" class="phone-input" />
      </div>
      <div class="add-protocol align-protocol">
        <span class="circle-checkbox" :class="{ checked: agree }" @click="agree = !agree"></span>
        <span class="protocol-text">添加时需同意 <el-link type="primary" :underline="false">用户服务协议</el-link></span>
      </div>
      <el-button type="success" class="add-btn" @click="handleAdd">同意协议并添加</el-button>
    </div>
    <!-- 卡类型选择弹窗（后续可扩展） -->
    <el-dialog v-model="showTypeSelect" title="选择卡类型" width="260px" :show-close="false">
      <el-radio-group v-model="cardType">
        <el-radio label="安徽新安银行 储蓄卡" />
        <el-radio label="中国工商银行 储蓄卡" />
        <el-radio label="中国建设银行 储蓄卡" />
      </el-radio-group>
      <template #footer>
        <el-button @click="showTypeSelect = false">取消</el-button>
        <el-button type="primary" @click="showTypeSelect = false">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, defineEmits } from 'vue'
import { ArrowLeft, ArrowRight, Camera } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['back', 'submit'])
const cardNumberInput = ref('')
const cardType = ref('')
const cardLogo = ref('')
const phone = ref('')
const showTypeSelect = ref(false)
const agree = ref(false)
const router = useRouter()
const route = useRoute()

function formatCardNumber(val) {
  return val.replace(/\D/g, '').replace(/(\d{5})(?=\d)/g, '$1 ').trim()
}
function parseCardNumber(val) {
  return val.replace(/\s/g, '')
}
const canSubmit = computed(() => {
  return cardNumberInput.value.replace(/\s/g, '').length >= 16 && cardType.value && phone.value.length === 11 && agree.value
})
function handleAdd() {
  if (!agree.value) {
    ElMessage.warning('请勾选服务协议')
    return
  }
  if (cardNumberInput.value.replace(/\s/g, '').length < 16 || !cardType.value || phone.value.length !== 11) {
    ElMessage.warning('请填写完整信息')
    return
  }
  const bankName = cardType.value ? cardType.value.split(' ')[0] : ''
  emit('submit', {
    bank: bankName,
    number: cardNumberInput.value.replace(/\s/g, ''),
    type: cardType.value,
    logo: cardLogo.value,
    phone: phone.value
  })
}
function goSelectBank() {
  router.push({
    path: '/select-bank',
    query: {
      cardNumber: cardNumberInput.value,
      phone: phone.value,
      agree: agree.value,
      cardType: cardType.value,
      cardLogo: cardLogo.value
    }
  })
}
onMounted(() => {
  if (route.query.cardNumber !== undefined) cardNumberInput.value = route.query.cardNumber
  if (route.query.phone !== undefined) phone.value = route.query.phone
  if (route.query.agree !== undefined) agree.value = route.query.agree === 'true'
  if (route.query.cardType) cardType.value = route.query.cardType
  if (route.query.cardLogo) cardLogo.value = route.query.cardLogo
})
</script>

<style scoped>
.add-bankcard-bg {
  background: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 32px;
}
.add-header {
  display: flex;
  align-items: center;
  padding: 18px 0 0 0;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #f2f2f2;
}
.back-btn {
  font-size: 1.1em;
  color: #409EFF;
  padding: 0 0 0 8px;
  margin-right: 8px;
}
.add-title {
  flex: 1;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  color: #222;
}
.add-content {
  max-width: 400px;
  margin: 0 auto;
  padding: 18px 0 0 0;
}
.add-form-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 18px 16px 16px 16px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-label {
  font-size: 0.98em;
  color: #222;
  font-weight: 500;
  margin-bottom: 2px;
}
.card-input {
  margin-bottom: 8px;
}
.card-camera {
  color: #bbb;
  font-size: 1.2em;
  cursor: pointer;
}
.card-type-row {
  display: flex;
  align-items: center;
  background: #f5f7fa;
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  margin-bottom: 8px;
}
.card-type-logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
  background: #f5f5f5;
}
.card-type-text {
  flex: 1;
  color: #222;
  font-size: 1em;
}
.card-type-arrow {
  color: #bbb;
}
.phone-input {
  margin-bottom: 8px;
}
.add-protocol.align-protocol {
  color: #bbb;
  font-size: 0.97em;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  padding-left: 2px;
}
.circle-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #34C759;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
  box-sizing: border-box;
  cursor: pointer;
  background: #fff;
  position: relative;
  transition: border-color 0.2s;
}
.circle-checkbox.checked {
  background: #34C759;
  border-color: #34C759;
}
.circle-checkbox.checked::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.protocol-text {
  color: #bbb;
  font-size: 0.97em;
}
.add-btn {
  width: 100%;
  font-size: 1.08em;
  border-radius: 8px;
  background: #34C759;
  border: none;
  color: #fff;
  font-weight: bold;
  margin-top: 8px;
  transition: background 0.2s;
}
@media (max-width: 600px) {
  .add-content {
    max-width: 100vw;
    padding: 12px 0 0 0;
  }
  .add-form-card {
    border-radius: 10px;
    padding: 12px 8px 12px 8px;
  }
}
</style> 